import * as VueRouter from 'vue-router'
import MobileLayout from '../layouts/MobileLayout.vue'
import FullPage from '../layouts/index.vue'
import LoginVue from '../pages/Login.vue'
import UserVue from '../pages/User.vue'
import MBuyParkSpaceVue from '../pages/mobile/MBuyParkSpace.vue'
import MMineVue from '../pages/mobile/MMine.vue'
import MParkRecordVue from '../pages/mobile/MParkRecord.vue'
import MParkSpaceVue from '../pages/mobile/MParkSpace.vue'
import MPayVue from '../pages/mobile/MPay.vue'
import MProfileVue from '../pages/mobile/MProfile.vue'
import CarVue from '../pages/park/Car.vue'
import OwnerVue from '../pages/park/Owner.vue'
import PackageVue from '../pages/park/Package.vue'
import ParkVue from '../pages/park/Park.vue'
import ParkRecordVue from '../pages/park/ParkRecord.vue'
import ParkSpaceVue from '../pages/park/ParkSpace.vue'
import PayMethodVue from '../pages/park/PayMethod.vue'
import PayRecordVue from '../pages/park/PayRecord.vue'
import PriceModeVue from '../pages/park/PriceMode.vue'
import ParkPlaygroundVue from '../pages/parkPlayground/ParkPlayground.vue'

// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes: any = [
    {
        path: '/login',
        component: LoginVue,
        title: '登录',
    },
    {
        path: '/park-playground',
        component: ParkPlaygroundVue,
        title: '停车场',
    },
    {
        path: '/m',
        component: MobileLayout,
        redirect: '/m/park-space',
        children: [
            {
                path: 'park-space',
                component: MParkSpaceVue,
                title: '空车位查询',
            },
            {
                path: 'park-record',
                component: MParkRecordVue,
                title: '停车记录',
            },
            {
                path: 'mine',
                component: MMineVue,
                title: '我的',
            },
            {
                path: 'buy-park-space',
                component: MBuyParkSpaceVue,
                title: '购买车位',
            },
            {
                path: 'pay',
                component: MPayVue,
                title: '支付停车费',
            },
            {
                path: 'profile',
                component: MProfileVue,
                title: '编辑个人信息',
            },
        ],
    },
    {
        path: '/',
        component: FullPage,
        redirect: '/user',
        children: [
            {
                path: 'user',
                component: UserVue,
                title: '用户管理',
            },
            {
                path: 'park',
                component: ParkVue,
                title: '停车场管理',
            },
            {
                path: 'park-space',
                component: ParkSpaceVue,
                title: '停车位管理',
            },
            {
                path: 'owner',
                component: OwnerVue,
                title: '车主管理',
            },
            {
                path: 'car',
                component: CarVue,
                title: '车辆管理',
            },
            {
                path: 'park-record',
                component: ParkRecordVue,
                title: '停车记录',
            },
            {
                path: 'pay-record',
                component: PayRecordVue,
                title: '订单管理',
            },
            {
                path: 'package',
                component: PackageVue,
                title: '套餐管理',
            },
            {
                path: 'price-mode',
                component: PriceModeVue,
                title: '计费模式管理',
            },
            {
                path: 'pay-method',
                component: PayMethodVue,
                title: '支付方式管理',
            },
        ],
    },
]

// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = VueRouter.createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: VueRouter.createWebHashHistory(),
    routes, // `routes: routes` 的缩写
})

const whiteList = ['/login', '/m/pay', '/park-playground']
const inWhiyeList = (path: string) => {
    let result = false
    whiteList.forEach((item) => {
        if (path.startsWith(item)) {
            result = true
        }
    })
    return result
}

// 添加路由守卫
router.beforeEach((to, from, next) => {
    // console.log(to, from)
    if (inWhiyeList(to.path)) {
        next()
    } else {
        const user: {
            id: number
            name: string
            type: 0 | 1 // 0: 管理员 1: 普通用户
        } = JSON.parse(localStorage.getItem('user') || null)

        // 如果用户信息不存在，跳转到登录页
        if (!user) {
            next('/login')
            return
        }
        // 管理员不能访问移动端页面
        if (user.type === 0 && to.path.startsWith('/m')) {
            next('/')
            return
        }
        // 普通用户不能访问管理端页面
        if (user.type === 1 && !to.path.startsWith('/m')) {
            next('/m')
            return
        }

        next()
    }
})

export default router
